<template>
  <div>
    <headTop></headTop>
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="员工工资" name="first">
          <el-col :span="2">
            <el-input placeholder="请输入内容" v-model="searchName"> </el-input>
            <div class="list">
              <ul
                class="infinite-list"
                v-infinite-scroll="load"
                style="overflow: auto"
              >
                <li
                  v-for="(item,index) in count"
                  :key="index"
        :class="selectedNum==index?'active':''"
                  @click="selectStaff(index)"
                >
                  {{ item.title }}
                </li>
              </ul>
            </div>
          </el-col>
          <el-col :span="22">
            <h3 style="text-align:center;">{{cdate}}年{{selectName}}工资情况</h3>
            <div style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
                 <line-chart :chartData="lineChartData" />
            </div>
             <el-table style="margin:10px">
          <el-table-column
            prop="name"
            label="时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="phone"
            label="基本工资"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="age"
            label="加班工资"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="idcard"
            label="扣款"
            align="center"
          ></el-table-column>
              <el-table-column
            prop="idcard"
            label="奖金"
            align="center"
          ></el-table-column>
           <el-table-column
            prop="idcard"
            label="应发工资"
            align="center"
          ></el-table-column>
           <el-table-column
            prop="idcard"
            label="实发工资"
            align="center"
          ></el-table-column>
           <el-table-column
            prop="idcard"
            label="状态"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="idcard"
            label="操作"
            align="center"
          >
           <template slot-scope="scope">
              <el-button
                icon="el-icon-edit"
                @click="editHandle(scope.row)"
                circle
              ></el-button>
              <el-button
                type="danger"
                @click="deleteHandle(scope.row)"
                icon="el-icon-delete"
                circle
              ></el-button>
            </template>
          </el-table-column>
    </el-table>
     <el-pagination
          class="page-bottom"
          :page-size="currentPageSize"
          layout="prev, pager, next, jumper, ->, total"
          :total="totalCount"
        >
        </el-pagination>
          </el-col>
        </el-tab-pane>
        <el-tab-pane label="工资计算" name="second">
                        <SalaryCount style="width:100%;height:100%;"></SalaryCount>

          
        </el-tab-pane>
        <el-tab-pane label="工资统计" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="修改信息" name="fourth">定时任务补偿</el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import searchView from "@/components/searchView";
import headTop from "@/components/headTop";
import historyrecords from "./work/history-records";
import recordStatistics from "./work/recordStatistics";
import workDay from "./work/workDay";
import workDataChart from "./work/workDataChart";
import LineChart from "../components/LineChart"
import { formatDate } from "@/utils/mUtils";
import SalaryCount from './salaryComponet/SalaryCount'
const lineChartData = {
  newVisitis: {
    actualData: [8000, 6120, 8161, 9134, 10005, 8160, 9165],
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}
export default {
  inject: ["reload"],
  data() {
    return {
      searchFormData: [
        {
          label: "姓名",
          prop: "name",
          element: "el-input",
        },

        {
          label: "状态",
          prop: "status",
          element: "el-select",
          options: [
            { label: "正常", value: 0 },
            { label: "迟到", value: 1 },
            { label: "缺勤", value: 2 },
            { label: "请假", value: 3 },
            { label: "早退", value: 4 },
          ],
        },
      ],
      totalCount: 0,
      currentPage: 0,
      currentPageSize: 10,
      pageCount: 1,
      dialogVisible: false,
      activeName: "first",
      count: [
       {'title':'王飞','active':true},
       {'title':'堂搜','active':false},
       {'title':'afoot','active':false},
       {'title':'卡时代峰峻','active':false},
       {'title':'是覅','active':false},
       {'title':'礼我发','active':false},
       {'title':'按链接','active':false},
       {'title':'按链接佛','active':false},

      ],
      searchName: "",
      selectName: "",
      selectedNum:0,
      cdate:new Date().getFullYear(),
      lineChartData:lineChartData.newVisitis
    };
  },
  mounted(){
      },
  components: {
    searchView,
    headTop,
    historyrecords,
    recordStatistics,
    workDay,
    workDataChart,
    LineChart,
    SalaryCount
  },
  methods: {
    clickData() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    searchHandle() {},
    handleClick(tab, event) {
      console.log(tab, event);
    },
    load() {
      this.count.push({'title':'礼我发','active':false});
    },
    selectStaff(i) {
     if (this.selectedNum === i) {
        this.selectedNum = -1; //取消选中
      } else {
        this.selectedNum = i;
      }
      this.selectName = this.count[i].title;
    },
  },
};
</script>
<style lang="less" scoped>

.item {
  margin: 10px auto;
  text-align: center;
  padding: 5px 0px;
  background-color: #f5f5f5;
 
}

.infinite-list {
  height: 400px;
   li:hover {
      background-color: #89b8ee;
  }
  li {
    text-align: center;
    background-color: #f4f4f4;
    padding: 5px;
    margin: 5px;
    font-size: 14px;

}
.active {
  background: #4990ce;
  border: #4990ce;
  color: #fff;
}
}

</style>